<!DOCTYPE html>
<html>

<head>
	<title>css变量的使用-切换颜色</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0
		}
		/* 根变量 */
		:root {
			--div-color: red
		}

		/*设置css的变量*/
		#div1 {
			width: 100px;
			height: 100px;
			background-color: var(--div-color)
		}
		/*使用该变量*/
		#div2 {
			width: 200px;
			height: 200px;
			background-color: var(--div-color)
		}

		/*使用该变量*/
		#div3 {
			width: 300px;
			height: 300px;
			background-color: var(--div-color)
		}

		/*使用该变量*/
		button {
			position: absolute;
			top: 50%;
			left: 50%;
			height: 40px;
			width: 100px;
			background-color: black;
			color: white;
			border: 2px solid white;
		}
		button:hover{
			background-color: blue;
		}
	</style>

</head>

<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<div id="div3"></div>
	<button>切换颜色</button>
	<script>
		let btn = document.querySelector('button')
		btn.onclick = function () {
			/*读取根样式*/
			const rootStyles = getComputedStyle(document.documentElement)
			const value = rootStyles.getPropertyValue('--div-color')
			console.log(value)
			if (value == 'red') {
				document.documentElement.style.setProperty('--div-color', 'greenyellow')
			} else {
				document.documentElement.style.setProperty('--div-color', 'red')
			}
		}
	</script>
</body>

</html>